<template>
	<div class="icons clearfix">
	<swiper :options="swiperOption">
		<swiper-slide v-for="(page,index) of pages" :key="index">
			<div class="icon" v-for="item of page" :key="item.id">
				<div class="icon-img">
					<img class="icon-img-content" :src="item.imgUrl">
				</div>
				<p>{{item.desc}}</p>
			</div>
		</swiper-slide>
		<div class="swiper-pagination"  slot="pagination"></div>
	</swiper>
	
	</div>
</template>

<script>
export default{
	name:'HomeIcons',
	props:{
		list:Array
	},
	data () {
		return{
			swiperOption:{
				autoplay: false,
				pagination: '.swiper-pagination',
			}
		}
	},
	computed: {
		pages () {
			const pages = []
			this.list.forEach((item,index) => {
				const page = Math.floor(index/8)
				if(!pages[page]){
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
}
</script>
<style lang="scss">
	.icons{
		.swiper-container{
			height: 0;
			padding-bottom: 55%;
		}
		.swiper-pagination{
			bottom: .1rem;
			.swiper-pagination-bullet-active{
				background: rgba(0,175,190,.8);
			}
		}
	}
</style>
<style lang="scss" scoped>
	.icons{
		.icon{
			position:relative;
			overflow:hidden;
			float:left;
			width: 25%;
			height:0;
			padding-bottom:25%;
			.icon-img{
				position:absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: .44rem;
				box-sizing: border-box;
				padding: .1rem;
				.icon-img-content{
					display: block;
					height: 100%;
					margin: 0 auto;
					margin-top: .1rem;
				}
			}
			p{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: .44rem;
				line-height: .44rem;
				text-align: center;
				color: $darkTextColor;
				font-size: .28rem;
				@include ellipsis;
			}
		}
	}
</style>